
<template>
    <div class="hello">
        <el-row>
            <el-col :span="8">
                <div style="width: 450px;height: 500px"></div>
            </el-col>
            <el-col :span="8">
                <div style="width: auto;height: auto">
                    <el-form
                            :model="SendEmail"
                            ref="SendEmail"
                            style="width: 500px;"
                    >
                        <el-form-item prop="name">
                            <h1>联系我们</h1>
                            <h5 style="text-align: left">我们的工作人员将在3个工作日内将处理结果发送至您的电子邮箱中。</h5>
                            <el-input
                                    placeholder="您的姓名"
                                    v-model="SendEmail.name"
                                    clearable
                            ></el-input>
                        </el-form-item>
                        <el-form-item prop="email">
                            <el-input
                                    placeholder="您的E-mail"
                                    v-model="SendEmail.email"
                                    clearable
                            ></el-input>
                        </el-form-item>

                        <el-form-item prop="text">
                            <el-input
                                    type="textarea"
                                    placeholder="请输入内容"
                                    v-model="SendEmail.text"
                                    maxlength="100"
                                    show-word-limit
                            />
                        </el-form-item>
                        <el-form-item>
                            <el-button type="success" @click="submit('SendEmail')" style="margin-left: 410px" round>发送</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </el-col>
            <el-col :span="8">
                <div style="width: 450px;height: 500px"></div>
            </el-col>
        </el-row>

    </div>
</template>

<script>
    export default {
        name: 'HelloWorld',
        data() {
            return {
                SendEmail:{
                    name: '',
                    email:'',
                    text: '',
                }
            };
        },
        methods: {

            submit(SendEmail){
                let form=this.$refs['SendEmail'];
                form.validate((valid)=>{
                    if (valid){
                        //进行表单的提交
                        //clone对象
                        let payLoad=_.clone(this.SendEmail);
                        axios.post("/children/send", payLoad).then(response=>{
                            if(response.data==='success'){
                                this.$message({
                                    title:'提示',
                                    message:"发送成功",
                                    type:'success'
                                })
                            }
                        })
                    }else{
                        return false;
                    }
                })
            },
        },
    };
</script>
<style>
    .hello{
        background-image: url("../../views/children/image/PDAir.jpg");
        width: 100%;
        height: 1000px;
    }
</style>